import { ref, watch } from "vue";
import { defineStore } from "pinia";

export interface FontSizeSettings {
  // 左侧边栏
  sidebar: {
    parameterList: number; // 参数列表字体大小
  };
  // 数据查看器区域
  dataViewer: {
    axisLabel: number; // 坐标轴标签字体大小
    axisTitle: number; // 轴标题字体大小
    cursorLabel: number; // 游标标签字体大小
  };
  // 右侧参数值显示
  parameterValueDisplay: {
    tableHeader: number; // 表格表头字体大小
    tableContent: number; // 表格内容字体大小
  };
}

// 正常分辨率下的默认字体大小设置
const defaultFontSizes: FontSizeSettings = Object.freeze({
  sidebar: {
    parameterList: 15,
  },
  dataViewer: {
    axisLabel: 12,
    axisTitle: 13,
    cursorLabel: 12,
  },
  parameterValueDisplay: {
    tableHeader: 15,
    tableContent: 14,
  },
});

// 1024分辨率下的默认字体大小设置
const defaultFontSizes1024: FontSizeSettings = Object.freeze({
  sidebar: {
    parameterList: 11, // 参数列表字体大小调整为11px
  },
  dataViewer: {
    axisLabel: 10,
    axisTitle: 10,
    cursorLabel: 11,
  },
  parameterValueDisplay: {
    tableHeader: 12, // 表格表头字体大小调整为12px
    tableContent: 11, // 表格内容字体大小调整为11px
  },
});

export const useFontSettingsStore = defineStore("fontSettings", () => {
  // 检测当前分辨率是否小于等于1024px
  const is1024Resolution = ref(window.innerWidth <= 1024);

  // 根据当前分辨率选择默认字体设置
  const getDefaultFontSizes = () => {
    return is1024Resolution.value ? defaultFontSizes1024 : defaultFontSizes;
  };

  // 使用 localStorage 获取保存的字体设置，如果没有则根据分辨率使用默认值
  const storedSettings = localStorage.getItem("fontSizeSettings");
  // 深拷贝默认值，确保不修改原始默认值
  const fontSizes = ref<FontSizeSettings>(
    storedSettings
      ? JSON.parse(storedSettings)
      : JSON.parse(JSON.stringify(getDefaultFontSizes()))
  );

  // 线条类型设置，默认为平滑曲线
  const lineType = ref<string>(localStorage.getItem("lineType") || "curve");

  // 采样点数设置，默认为500
  const storeSamplePoints = localStorage.getItem("samplePoints");
  const samplePoints = ref<number>(
    storeSamplePoints ? Number(storeSamplePoints) : 500
  );

  // 监听窗口大小变化
  const setupResizeListener = () => {
    const handleResize = () => {
      const newIs1024 = window.innerWidth <= 1024;
      // 如果分辨率类型发生变化且没有自定义字体设置，应用新的默认值
      if (
        newIs1024 !== is1024Resolution.value &&
        !localStorage.getItem("fontSizeSettings")
      ) {
        is1024Resolution.value = newIs1024;
        fontSizes.value = JSON.parse(JSON.stringify(getDefaultFontSizes()));
        updateCSSVariables();
      } else {
        is1024Resolution.value = newIs1024;
      }
    };

    window.addEventListener("resize", handleResize);

    // 初始调用一次确保正确设置
    handleResize();

    // 返回清理函数
    return () => {
      window.removeEventListener("resize", handleResize);
    };
  };

  // 在组件挂载时设置
  if (typeof window !== "undefined") {
    setupResizeListener();
  }

  // 更新字体设置
  function updateFontSize(path: string, value: number) {
    // 验证字体大小值在10-20范围内
    if (isNaN(value) || value < 10) {
      value = 10;
    } else if (value > 20) {
      value = 20;
    }

    const keys = path.split(".");
    let target: any = fontSizes.value;

    // 遍历路径直到倒数第二个键
    for (let i = 0; i < keys.length - 1; i++) {
      target = target[keys[i]];
    }

    // 设置最后一个键的值
    target[keys[keys.length - 1]] = value;

    // 保存到 localStorage
    localStorage.setItem("fontSizeSettings", JSON.stringify(fontSizes.value));

    // 更新 CSS 变量
    updateCSSVariables();
  }

  // 更新线条类型设置
  function updateLineType(type: string) {
    // 验证线条类型
    if (type !== "curve" && type !== "line") {
      console.warn("Invalid line type:", type);
      return;
    }

    lineType.value = type;
    // 保存到 localStorage
    localStorage.setItem("lineType", type);
  }

  // 更新采样点数设置
  function updateSamplePoints(points: number) {
    samplePoints.value = points;
    // 保存到 localStorage
    localStorage.setItem("samplePoints", points.toString());
  }

  // 重置为默认值
  function resetToDefault() {
    // 根据当前分辨率选择默认值
    fontSizes.value = JSON.parse(JSON.stringify(getDefaultFontSizes()));
    // 重置线条类型为默认值（平滑曲线）
    lineType.value = "curve";
    // 重置采样点数为默认值
    samplePoints.value = 500;
    // 清除localStorage中的设置
    localStorage.removeItem("fontSizeSettings");
    localStorage.removeItem("lineType");
    localStorage.removeItem("samplePoints");
    // 更新 CSS 变量
    updateCSSVariables();
  }

  // 将字体设置应用到 CSS 变量
  function updateCSSVariables() {
    const root = document.documentElement;

    // 左侧边栏
    root.style.setProperty(
      "--font-size-sidebar-parameter-list",
      `${fontSizes.value.sidebar.parameterList}px`
    );

    // 数据查看器
    root.style.setProperty(
      "--font-size-dataviewer-axis-label",
      `${fontSizes.value.dataViewer.axisLabel}px`
    );
    root.style.setProperty(
      "--font-size-dataviewer-axis-title",
      `${fontSizes.value.dataViewer.axisTitle}px`
    );
    root.style.setProperty(
      "--font-size-dataviewer-cursor-label",
      `${fontSizes.value.dataViewer.cursorLabel}px`
    );

    // 参数值显示
    root.style.setProperty(
      "--font-size-parametervaluedisplay-table-header",
      `${fontSizes.value.parameterValueDisplay.tableHeader}px`
    );
    root.style.setProperty(
      "--font-size-parametervaluedisplay-table-content",
      `${fontSizes.value.parameterValueDisplay.tableContent}px`
    );
  }

  // 初始化时应用 CSS 变量
  updateCSSVariables();

  return {
    fontSizes,
    lineType,
    samplePoints,
    updateFontSize,
    updateLineType,
    updateSamplePoints,
    resetToDefault,
    updateCSSVariables,
    is1024Resolution,
  };
});
